<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <style media="screen">
        .wrap {
            width: 100%;
            position: absolute;
            top: 0px;
            padding: 0 15px;
            /*overflow: hidden;*/
        }

        .wrap .navlist {
            width: 100%;
            /*padding: 10px 15px;
            background-color: #fff;*/
            overflow: hidden;
        }

        .wrap .navlist {
            padding-top: 0px;
        }

        .banner {
            width: 100%;
            overflow: hidden;
        }

        .banner_inner {
            width: 100%;
            height: 140px;
            border-radius: 5px;
        }

        .banner_inner>.swiper-container {
            width: 100%;
            height: 140px;
            border-radius: 5px;
        }

        .banner_inner>.swiper-container>.swiper-wrapper>.swiper-slide {
            width: 100%;
            height: 140px;
            border-radius: 5px;
        }

        .banner_inner>.swiper-container>.swiper-wrapper>.swiper-slide>img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 5px;
        }

        .banner_inner>.swiper-container-horizontal>.swiper-pagination-bullets,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 0px;
            left: 0;
            width: 100%;
        }

        .banner_inner>.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
            width: 10px;
            height: 2px;
            display: inline-block;
            border-radius: 2px;
            background: #999999;
            opacity: 1;
        }

        .banner_inner>.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {
            opacity: 1;
            background: #fff;
        }

        .swiper1 {
            /*border: 1px solid red;*/
            padding-bottom: 15px;
        }

        .swiper1>.swiper-pagination-bullets,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 0px;
            left: 0;
            width: 100%;
        }

        .swiper1>.swiper-pagination-bullets .swiper-pagination-bullet {
            width: 8px;
            height: 3px;
            display: inline-block;
            border-radius: 4px;
            background: #999999;
            opacity: 1;
        }

        .swiper1>.swiper-pagination-bullets .swiper-pagination-bullet-active {
            opacity: 1;
            width: 10px;
            background: red;
            left: 35px;
        }

        .active_bg {
            width: 100%;
            height: 94px;
            margin-top: 10px;
            /*border: 1px solid red;*/
        }

        .active_bg>.swiper-container {
            width: 100%;
            height: 94px;
        }

        .active_bg>.swiper-container>.swiper-wrapper {
            width: 100%;
            height: 94px;
        }

        .active_bg>.swiper-container>.swiper-wrapper>.swiper-slide {
            width: 100%;
            height: 94px;
        }

        .active_bg>.swiper-container>.swiper-wrapper>.swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .active_small {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            overflow: hidden;
        }

        .active_small .active_small_l {
            width: 49%;
            overflow: hidden;
            border-radius: 5px;
        }

        .active_small .active_small_l img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .nav_menu {
            width: 100%;
            /*margin-top: 20px;*/
            overflow: hidden;
        }

        .nav_menu div {
            width: 20%;
            margin-top: 20px;
            position: relative;
            float: left;
        }

        .nav_menu div span {
            display: block;
        }

        .nav_menu div span:nth-child(1) {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: url(../../image/king_place.png) no-repeat;
            background-size: 100% 100%;
            margin: 0 auto;
        }

        .nav_menu div span:nth-child(1) img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .nav_menu div span:nth-child(2) {
            width: auto;
            height: 15px;
            line-height: 15px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-top: 5px;
            text-align: center;
        }

        .nav_menu div span:nth-child(3) {
            width: 25px;
            height: 12px;
            background: linear-gradient(-59deg, #B078BA, #2E5DE4);
            border-radius: 12px 0px 12px 0px;
            position: absolute;
            top: 0;
            right: -3px;
        }
        /*直播间css*/

        .AreBuying {
            width: 100%;
            margin-top: 5px;
            position: relative;
            /*overflow: hidden;*/
        }

        .AreBuying .banner {
            width: 100%;
            height: 100%;
        }

        .AreBuying .banner>.swiper-container {
            width: 100%;
            /*height: 129px;*/
            border-radius: 5px;
        }

        .AreBuying .banner>.swiper-container>.swiper-wrapper>.swiper-slide {
            width: 100%;
            height: 94px;
            border-radius: 5px;
            position: relative;
        }

        .AreBuying .banner>.swiper-container>.swiper-wrapper>.swiper-slide>img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            position: absolute;
            bottom: 0;
        }

        .AreBuying .banner>.swiper-container-horizontal>.swiper-pagination-bullets,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 0px;
            left: 0;
            width: 100%;
        }

        .AreBuying .banner>.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
            width: 10px;
            height: 2px;
            display: inline-block;
            border-radius: 2px;
            background: #999999;
            opacity: 1;
        }

        .AreBuying .banner>.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {
            opacity: 1;
            background: #fff;
        }

        .AreBuying .text {
            width: 100%;
            height: 17px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 17px;
            margin-top: 21px;
        }

        .AreBuying .AreBuyingGoods {
            width: 100%;
            height: 168px;
            margin-top: 17px;
        }

        .AreBuying .AreBuyingGoods>.swiper-container {
            width: 100%;
            height: 100%;
            /*border: 1px solid green;*/
        }

        .AreBuying .AreBuyingGoods>.swiper-container>.swiper-wrapper {
            width: 100%;
            height: 100%;
            /*border: 1px solid green;*/
        }

        .AreBuying .AreBuyingGoods>.swiper-slide {
            /*width: 100px;
          height: 100%;*/
            /*padding: 5px;
          box-sizing: border-box;
          background-color: #fff;
          margin-left: 3px;*/
            /*background-color: red;*/
        }

        .AreBuying .AreBuyingGoods div.item {
            /*width: 100px;*/
            height: 100%;
            padding: 5px;
            box-sizing: border-box;
            background-color: #fff;
            /*margin-left: 3px;*/
        }

        .AreBuying .AreBuyingGoods div.item:first-child {
            margin-left: 0px;
        }

        .AreBuying .AreBuyingGoods div.item .goods_picture {
            width: 100%;
            height: 100px;
        }

        .AreBuying .AreBuyingGoods div.item .goods_picture img {
            width: 100%;
            height: 100px;
            display: block;
        }

        .AreBuying .AreBuyingGoods div.item .goods_name {
            width: 100%;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #444444;
            line-height: 13px;
            margin-top: 6.5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }

        .AreBuying .AreBuyingGoods div.item .coupon {
            display: flex;
            margin-top: 5px;
        }

        .AreBuying .AreBuyingGoods div.item .coupon .coupon_l {
            width: 37px;
            height: 15px;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: #fff;
            background: #FF4242;
            border-radius: 2.5px;
        }

        .AreBuying .AreBuyingGoods div.item .coupon .coupon_r {
            width: 51px;
            height: 15px;
            background: url(../../image/arebuyingcoupon_bg.png) no-repeat;
            background-size: 100% 100%;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: #FF4242;
        }

        .AreBuying .AreBuyingGoods div.item .goods_price {
            display: flex;
            margin-top: 6.5px;
        }

        .AreBuying .AreBuyingGoods div.item .goods_price a:first-child {
            width: auto;
            height: 13px;
            line-height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
        }

        .AreBuying .AreBuyingGoods div.item .goods_price a:last-child {
            width: auto;
            height: 11px;
            line-height: 12px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            text-decoration: line-through;
            color: #999999;
            margin-top: 1px;
            margin-left: 4px;
        }
        /*实时疯抢*/

        .realTimeRush {
            width: 100%;
            background: linear-gradient(-90deg, #7619EC, #A429F3);
            overflow: hidden;
        }

        .realTimeRush_inner {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .goods_first {
            width: 100%;
            padding: 0 47px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            overflow: hidden;
        }

        .goods_first span:nth-child(2) {
            width: 24.5px;
            height: 26.5px;
        }

        .goods_first span:nth-child(2) img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .goods_first span:first-child {
            width: 80px;
            height: 1px;
            background: #FFFFFF;
            opacity: 0.8;
            margin-top: 12.5px;
        }

        .goods_first span:last-child {
            width: 80px;
            height: 1px;
            background: #FFFFFF;
            opacity: 0.8;
            margin-top: 12.5px;
        }

        .realTimeRush_inner .text {
            width: 100%;
            height: 17px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            font-style: italic;
            color: #FFFFFF;
            line-height: 17px;
            margin-top: 7px;
            text-align: center;
        }

        .realTimeRush_inner>.content {
            width: 100%;
            padding: 15px 10px 0 10px;
            margin-top: 13.5px;
            box-sizing: border-box;
            background-color: #fff;
            /*display: flex;*/
            overflow: hidden;
        }

        .realTimeRush_inner>.content div.item {
            /*flex: 1;*/
            width: 100px;
            height: 100%;
            /*padding: 5px;*/
            box-sizing: border-box;
            background-color: #fff;
            /*margin-left: 3px;*/
        }

        .realTimeRush_inner>.content div.item:first-child {
            margin-left: 0px;
        }

        .realTimeRush_inner>.content div.item .goods_picture {
            width: 100px;
            height: 100px;
            /*border: 1px solid red;*/
        }

        .realTimeRush_inner>.content div.item .goods_picture img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .realTimeRush_inner>.content div.item .goods_name {
            width: 100%;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #444444;
            line-height: 13px;
            margin-top: 6.5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }

        .realTimeRush_inner>.content div.item .coupon {
            display: flex;
            margin-top: 5px;
        }

        .realTimeRush_inner>.content div.item .coupon .coupon_l {
            width: 37px;
            height: 15px;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: #fff;
            background: #FF4242;
            border-radius: 2.5px;
        }

        .realTimeRush_inner>.content div.item .coupon .coupon_r {
            width: 51px;
            height: 15px;
            background: url(../../image/arebuyingcoupon_bg.png) no-repeat;
            background-size: 100% 100%;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: #FF4242;
        }

        .realTimeRush_inner>.content div.item .goods_price {
            display: flex;
            margin-top: 6.5px;
        }

        .realTimeRush_inner>.content div.item .goods_price a:first-child {
            width: auto;
            height: 13px;
            line-height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
        }

        .realTimeRush_inner>.content div.item .goods_price a:last-child {
            width: auto;
            height: 11px;
            line-height: 12px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            text-decoration: line-through;
            color: #999999;
            margin-top: 1px;
            margin-left: 4px;
        }

        .realTimeRush_inner .more {
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            background: #F7F7F7!important;
            margin-bottom: 20px;
        }

        .ShakeWellGoods {
            width: 100%;
            background: #fff;
            overflow: hidden;
        }

        .ShakeWellGoods_inner {
            width: 100%;
            padding: 15px 15px;
            padding-bottom: 15px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .ShakeWellGoods_inner .content {
            display: flex;
            margin-top: 10px;
        }

        .ShakeWellGoods_inner .head {
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
        }

        .ShakeWellGoods_inner .head .head_l {
            width: auto;
            display: flex;
        }

        .ShakeWellGoods_inner .head .head_l span:first-child {
            height: 17px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 17px;
        }

        .ShakeWellGoods_inner .head .head_l span:last-child {
            width: 100px;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fff;
            line-height: 13px;
            margin-top: 2px;
            background: linear-gradient(-90deg, #7619EC, #A429F3);
            border-radius: 6px 0px 6px 0px;
            margin-left: 5px;
            text-align: center;
        }

        .ShakeWellGoods_inner .head .head_more {
            width: auto;
            height: 17px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FF4242;
            line-height: 17px;
        }

        .ShakeWellGoods_inner>.content div.item {
            /*flex: 1;*/
            width: 105px;
            height: 100%;
            padding: 5px;
            box-sizing: border-box;
            background-color: #fff;
            /*margin-left: 3px;*/
        }

        .ShakeWellGoods_inner>.content div.item:first-child {
            margin-left: 0px;
        }

        .ShakeWellGoods_inner>.content div.item .goods_picture {
            width: 105px;
            height: 105px;
        }

        .ShakeWellGoods_inner>.content div.item .goods_picture img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .ShakeWellGoods_inner>.content div.item .goods_name {
            width: 100%;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #444444;
            line-height: 13px;
            margin-top: 6.5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }

        .ShakeWellGoods_inner>.content div.item .coupon {
            display: flex;
            margin-top: 5px;
        }

        .ShakeWellGoods_inner>.content div.item .coupon .coupon_l {
            width: 37px;
            height: 15px;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: #fff;
            background: #FF4242;
            border-radius: 2.5px;
        }

        .ShakeWellGoods_inner>.content div.item .coupon .coupon_r {
            width: 51px;
            height: 15px;
            background: url(../../image/arebuyingcoupon_bg.png) no-repeat;
            background-size: 100% 100%;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: #FF4242;
        }

        .ShakeWellGoods_inner>.content div.item .goods_price {
            display: flex;
            margin-top: 6.5px;
        }

        .ShakeWellGoods_inner>.content div.item .goods_price a:first-child {
            width: auto;
            height: 13px;
            line-height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
        }

        .ShakeWellGoods_inner>.content div.item .goods_price a:last-child {
            width: auto;
            height: 11px;
            line-height: 12px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            text-decoration: line-through;
            color: #999999;
            margin-top: 1px;
            margin-left: 4px;
        }

        .index_bg {
            width: 100%;
            height: 100px;
            position: relative;
            z-index: 0;
            background: rgb(255, 48, 62);
            border-radius: 0 0 10% 10%;
            overflow: hidden;
        }

        .index_bg::after {
            content: '';
            width: 120%;
            height: 100px;
            position: absolute;
            left: -10%;
            top: 0;
            border-radius: 0 0 50% 50%;
        }

        .bottom_tab {
            width: 100%;
            padding: 0 70px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .bottom_tab ul {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .bottom_tab ul li {
            margin-top: 20px;
        }

        .bottom_tab ul li span {
            display: block;
        }

        .bottom_tab ul li span:first-child {
            width: auto;
            height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 15px;
            text-align: center;
        }

        .bottom_tab ul li span.textActive {
            height: 17px;
            /*line-height: 17px;*/
            font-size: 19px;
            color: #21135B!important;
        }

        .bottom_tab ul li span:last-child {
            width: auto;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 13px;
            margin-top: 6px;
            text-align: center;
        }

        .wrap_>.content {
            width: 100%;
            /*padding: 0 15px;*/
            overflow: hidden;
        }

        .wrap_>.content ul {
            width: 100%;
            margin-top: 5px;
            overflow: hidden;
        }

        .wrap_>.content ul li {
            width: 48%;
            background-color: #fff;
            padding: 5px;
            float: left;
            margin-left: 3%;
            margin-top: 10px;
            box-sizing: border-box;
            overflow: hidden;
            min-height: 245px;
        }

        .wrap_>.content ul li:nth-child(2n+1) {
            margin-left: 0;
        }

        .wrap_>.content ul li>.goods_picture {
            width: 100%;
            height: 155px;
        }

        .wrap_>.content ul li>.goods_picture img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .wrap_>.content ul li>.intro {
            width: 100%;
            overflow: hidden;
        }

        .wrap_>.content ul li>.intro span:first-child {
            width: 100%;
            overflow: hidden;
            margin-top: 3px;
            font-size: 12px;
        }

        .wrap_>.content ul li>.intro span:first-child img {
            display: inline-block;
            margin-top: 2px;
            width: 25px;
            height: 12px;
            margin-right: 2px;
        }

        .wrap_>.content ul li>.price {
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }

        .wrap_>.content ul li>.price .price_item {
            display: flex;
            width: auto;
        }

        .wrap_>.content ul li>.price .price_item:last-child {
            height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 15px;
        }

        .wrap_>.content ul li>.price .price_item span:nth-child(1) {
            width: auto;
            height: 15px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
        }

        .wrap_>.content ul li>.price .price_item span:nth-child(2) {
            width: auto;
            height: 15px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
            line-height: 17px;
        }

        .wrap_>.content ul li>.price .price_item span:nth-child(3) {
            width: auto;
            height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
            line-height: 15px;
        }

        .play {
            width: 25px;
            height: 25px;
            margin: 0 auto;
            margin-top: -62.5px;
        }

        .play img {
            display: block;
            width: 100%;
            height: 100%;
        }

        [v-cloak] {
            display: none!important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="index_bg"></div>
        <div class="wrap">
            <div class="navlist">
                <div class="banner">
                    <div class="banner_inner">
                        <div class="swiper-container swiper10">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for='item in bannerUrl' @click='SwiperJumpLink(item.urlType,item.url)'>
                                    <img alt="" :src="item.pic" v-cache-src="item.pic" alt="">
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
                <div class="active_bg" v-if='singleLineList.length!=0'>
                    <div class="swiper-container swiper4">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for='item in singleLineList' @click='SwiperJumpLink(item.urlType,item.url)'><img :src="item.pic" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="active_small" v-if='doubleLineList.length!=0'>
                    <div class="active_small_l" v-for='item in doubleLineList' @click='SwiperJumpLink(item.urlType,item.url)'><img :src="item.pic" alt=""></div>
                    <!-- <div class="active_small_l"></div> -->
                </div>

                <div class="swiper-container swiper1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="nav_menu">
                                <div v-for='(item,index) in navList' v-if='index<=9' @click='openNavPage(item.urlType,item.murl)'>
                                    <span><img :src="item.mpic" alt=""></span>
                                    <span>{{item.mname}}</span>
                                    <!-- <span ></span> -->
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide" v-if='navListLength>9'>
                            <div class="nav_menu">
                                <div v-for='(item,index) in navList' v-if='index>9' @click='openNavPage(item.urlType,item.murl)'>
                                    <span><img src="../../image/king_place.png" v-cache-src="item.mpic" alt=""></span>
                                    <span>{{item.mname}}</span>
                                    <!-- <span ></span> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>

            </div>


            <div class="AreBuying">
                <div class="banner" v-if='bottomBannerList.length!=0'>
                    <div class="swiper-container swiper2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for='item in bottomBannerList'><img alt="" :src="item.pic"></div>
                        </div>
                        <!-- Add Pagination -->

                    </div>
                    <div class="swiper-pagination"></div>
                </div>

                <div class="text">大家都在买</div>
                <div class="AreBuyingGoods">
                    <div class="swiper-container swiper3">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for='item in zdm' @click='openGoodsDtailsPage(item.itemid)'>
                                <div class="item">
                                    <div class="goods_picture"><img :src="item.itempic" alt=""></div>
                                    <div class="goods_name">{{item.itemshorttitle}}</div>
                                    <div class="coupon">
                                        <div class="coupon_l">爆款</div>
                                        <div class="coupon_r">{{item.couponmoney}}元券</div>
                                    </div>
                                    <div class="goods_price">
                                        <a>¥{{item.itemendprice}}</a>
                                        <a>¥{{item.itemprice}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="realTimeRush" style="margin-top:10px;">
                <div class="realTimeRush_inner">
                    <div class="goods_first">
                        <span></span>
                        <span><img src="../../image/goods_first_icon.png" alt=""></span>
                        <span></span>
                    </div>
                    <div class="text">实时疯抢榜</div>
                    <div class="content">
                        <div class="swiper-container swiper5">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for='item in phb' @click='openGoodsDtailsPage(item.goodsId)'>
                                    <div class="item">
                                        <div class="goods_picture"><img :src="item.mainPic" alt=""></div>
                                        <div class="goods_name">{{item.dtitle}}</div>
                                        <div class="coupon">
                                            <div class="coupon_l">爆款</div>
                                            <div class="coupon_r">{{item.couponPrice}}元券</div>
                                        </div>
                                        <div class="goods_price">
                                            <a>¥{{item.actualPrice}}</a>
                                            <a>¥{{item.originalPrice}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="more" @click='openHotListPage()'>更多好物</div>
                </div>
            </div>


            <div class="ShakeWellGoods">
                <div class="ShakeWellGoods_inner">
                    <div class="head">
                        <div class="head_l"><span>抖好货</span><span>精选爆款 . 抖音好物</span></div>
                        <div class="head_more" @click='openShakeGoodsPage()'>MORE</div>
                    </div>
                    <div class="content">
                        <div class="swiper-container swiper5">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for='item in dygoods' @click='openVideoPlayPage(item.itemid,item.itemshorttitle,item.dyVideoUrl,item.dyVideoTitle)'>
                                    <div class="item">
                                        <div class="goods_picture">
                                            <img :src="item.itempic" alt="">
                                            <div class="play"><img src="../../image/play_icon.png" alt=""></div>
                                        </div>
                                        <div class="goods_name">{{item.itemshorttitle}}</div>
                                        <div class="coupon">
                                            <div class="coupon_l">爆款</div>
                                            <div class="coupon_r">{{item.couponmoney}}元券</div>
                                        </div>
                                        <div class="goods_price">
                                            <a>¥{{item.itemendprice}}</a>
                                            <a>¥{{item.itemprice}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom_tab">
                <ul>
                    <li v-for='(item,index) in bottomTabList' @click='changeBottom(index)'>
                        <span :class="{'textActive':isActive==index}">{{item.name}}</span>
                        <span>{{item.child}}</span>
                    </li>
                </ul>
            </div>


            <div class="wrap_">
                <div class="content">
                    <ul>
                        <li v-for='item in GuessLoveData' @click='openGoodsDtailsPage(item.goodsId)'>
                            <div class="goods_picture"><img :src="item.mainPic" v-cache-src="item.mainPic" alt=""></div>
                            <div class="intro">
                                <span class="aui-ellipsis-2" v-if='item.shopType==1'><img src="../../image/tm.png" alt="">{{item.title}}</span>
                                <span class="aui-ellipsis-2" v-else><img src="../../image/tb_search.png" alt="">{{item.title}}</span>
                                <!-- <span ></span> -->
                            </div>
                            <div class="price">
                                <div class="price_item"><span>券后</span><span>￥</span><span>{{item.actualPrice}}</span></div>
                                <div class="price_item">已售{{item.monthSales}}</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript" src="../../script/swiper-bundle.min.js"></script>
<script type="text/javascript">
    /**
     * [注册一个全局自定义指令 `V-   cache-src`]
     * @param  {[type]} el      [需要图片缓存的元素]
     * @param  {[type]} binding [服务器图片对象数据]
     * @return {[type]}         [服务器图片地址]
     */
    Vue.directive('cache-src', function(el, binding) {
        if (binding) {
            setTimeout(function() {
                api.imageCache({
                    url: binding.value,
                    thumbnail: false
                }, function(ret, err) {
                    if (ret && ret.status) {
                        el.setAttribute("src", ret.url);
                    }
                });
            }, 100);
        }
    });
    apiready = function() {
        var swiper = new Swiper('.swiper1', {
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            autoplay: false,
            loop: false,
            observeParents: true,
            observer: true
        });
        vm.getSwiperBanner();
        vm.getNavList();
        vm.getGoods();
        if (api.systemType == 'android') {
            if (api.systemVersion >= 10) {
                vm.GuessLoveData = [];
            } else {
                vm.GuessLoveData = [];
                vm.getBottomlist('IMEI', api.deviceId, 3);
            }
        } else {
            vm.GuessLoveData = [];
            var idfa = api.require('idfa');
            idfa.getIDFA(function(ret, err) {
                if (ret.status) {
                    vm.getBottomlist('IDFA', ret.value, 3);
                }
            });
        }
        vm.bottomLoad();
        vm.initRefresh();

        api.addEventListener({
            name: 'fixedColor'
        }, function(ret, err) {
            if (ret) {
                document.getElementsByClassName('index_bg')[0].style.backgroundColor = 'red';
            }
        });


        api.addEventListener({
            name: 'refreshColor'
        }, function(ret, err) {
            if (ret) {
                document.getElementsByClassName('index_bg')[0].style.backgroundColor = ret.value.color;
                api.setCustomRefreshHeaderInfo({
                    bgColor: ret.value.color,
                    images: [
                        'widget://image/refresh/dropdown0.png',
                        'widget://image/refresh/dropdown1.png',
                        'widget://image/refresh/dropdown2.png',
                        'widget://image/refresh/dropdown3.png',
                        'widget://image/refresh/dropdown4.png',
                        'widget://image/refresh/dropdown5.png',
                        'widget://image/refresh/dropdown6.png'
                    ],
                    tips: {
                        pull: '下拉刷新',
                        threshold: '松开立即刷新',
                        load: '正在刷新'
                    },
                    animationRate: 0.2
                }, function(ret) {
                    vm.getNavList();
                    setTimeout(function() {
                        api.refreshHeaderLoadDone()
                    }, 1500);
                });
            }
        });

        vm.getOaid();
    }
    var vm = new Vue({
        el: '#app',
        data: {
            banner_index: 1,
            bannerUrl: [],
            bottomBannerList: [],
            singleLineList: [],
            doubleLineList: [],
            navList: [],
            navListLength: 0,
            zdm: [],
            phb: [],
            dygoods: [],
            isActive: 1,
            pageId: 1,
            GuessLoveData: [],
            oaid: '',
            bottomTabList: [{
                name: '发现',
                child: '推荐'
            }, {
                name: '精选',
                child: '猜你喜欢'
            }, {
                name: '美食',
                child: '吃货专属'
            }, ]
        },
        methods: {
            initRefresh: function() {
                cl.openRefresh(function() {
                    vm.getNavList();
                    // vm.getSwiperBanner();
                })
            },
            /**
             *
             * 获取轮播图
             * @return {[type]} [description]
             */

            getSwiperBanner: function() {
                api.ajax({
                    url: cl.apiServer + 'banner/list/' + 1,
                    method: 'get'
                }, function(ret, err) {
                    if (ret) {
                        if (ret.code == 0) {
                            // alert(JSON.stringify(ret.data))
                            vm.bannerUrl = ret.data.topBannerList;
                            vm.bottomBannerList = ret.data.bottomBannerList;
                            vm.singleLineList = ret.data.singleLineList;
                            // alert(JSON.stringify(vm.singleLineList))
                            vm.doubleLineList = ret.data.doubleLineList;
                            setTimeout(function() {
                                vm.initBanner();
                            }, 0)
                        }
                    }
                });
            },
            /**
             *
             * 轮播图跳转
             * @return {[type]} [description]
             */

            SwiperJumpLink: function(urlType, url) {
                if (urlType == 0) {
                    cl.openWin({
                        name: '../../brower',
                        pageParam: {
                            link: url
                        }
                    })
                }
            },
            /**
             * [下标]
             * @param  {[type]} index [description]
             * @return {[type]}       [description]
             */
            currentFun: function(index) {
                // console.log('banner图'+JSON.stringify(vm.bannerUrl));
                // alert(vm.bannerUrl.length)
                var inx = index;
                // alert(index)
                if (inx == 5) {
                    inx == 1;
                    api.sendEvent({
                        name: 'refreshColor',
                        extra: {
                            color: vm.bannerUrl[0].colour
                        }
                    });
                } else {
                    for (var i = 0; i < vm.bannerUrl.length; i++) {
                        if (inx - 1 == i) {
                            api.sendEvent({
                                name: 'refreshColor',
                                extra: {
                                    color: vm.bannerUrl[i].colour
                                }
                            });
                        }
                    }
                }
            },
            initBanner: function() {
                var swiper = new Swiper('.swiper10', {
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false,
                        waitForTransition: true,
                    },
                    on: {
                        slideChangeTransitionStart: function() {
                            //可以读取到当前活动的下班标
                            var num = this.activeIndex;


                            vm.currentFun(num);
                        },
                        click: function() {
                            const realIndex = this.realIndex;
                            //  alert(realIndex)
                            let url = vm.bannerUrl[realIndex].url;
                            let urlType = vm.bannerUrl[realIndex].urlType
                            if (urlType == 0) {
                                cl.openWin({
                                    name: '../../brower',
                                    pageParam: {
                                        link: url
                                    }
                                })
                            }
                        },
                    },
                    freeMode: false,
                    touchRatio: 1,
                    observeParents: true,
                    observer: true,
                    loop: true,
                });
                var swiper = new Swiper('.swiper2', {
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false,
                        waitForTransition: true,
                    },
                    on: {
                        click: function() {
                            const realIndex = this.realIndex;
                            //  alert(realIndex)
                            let url = vm.bottomBannerList[realIndex].url;
                            let urlType = vm.bottomBannerList[realIndex].urlType
                            if (urlType == 0) {
                                cl.openWin({
                                    name: '../../brower',
                                    pageParam: {
                                        link: url
                                    }
                                })
                            }
                        },
                    },
                    freeMode: false,
                    touchRatio: 1,
                    observeParents: true,
                    observer: true,
                    loop: true,
                });
                var swiper = new Swiper('.swiper4', {

                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false,
                        waitForTransition: true,
                    },
                    on: {
                        click: function() {
                            const realIndex = this.realIndex;
                            //  alert(realIndex)
                            let url = vm.singleLineList[realIndex].url;
                            let urlType = vm.singleLineList[realIndex].urlType
                            if (urlType == 0) {
                                cl.openWin({
                                    name: '../../brower',
                                    pageParam: {
                                        link: url
                                    }
                                })
                            }
                        },
                    },
                    freeMode: false,
                    touchRatio: 1,
                    observeParents: true,
                    observer: true,
                    loop: true,
                });
            },
            /**
             *
             * 获取金刚区菜单
             * @return {[type]} [description]
             */
            getNavList: function() {
                api.ajax({
                    url: cl.apiServer + 'homeMenu/getHomeMenuList',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: cl.userToken
                    },
                    data: {
                        body: {
                            type: 1,
                            version: cl.deviceInfo().appVersion,
                            mobileInfo: cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        console.log(JSON.stringify(ret));
                        if (ret.code == 0) {
                            vm.navList = ret.data;
                            vm.navListLength = ret.data.length;
                        }
                    }
                });
            },
            openNavPage: function(urlType, murl) {
                // alert(urlType)
                // alert(murl)
                if (urlType == 0) {
                    cl.openWin({
                        name: '../../brower',
                        pageParam: {
                            link: murl
                        }
                    })
                } else {
                    cl.openWin({
                        name: murl
                    })
                }

            },
            /**
             *
             * 获取大家都在买，实时疯抢，抖好货
             * @return {[type]} [description]
             */
            getGoods: function() {
                api.ajax({
                    url: cl.apiServer + 'tb/getMQD',
                    method: 'post'
                }, function(ret, err) {
                    if (ret) {
                        // alert(JSON.stringify(ret.data))
                        if (ret.code == 0) {
                            vm.zdm = ret.data.zdm;
                            // alert(JSON.stringify(vm.zdm))
                            vm.phb = ret.data.phb;
                            // alert(JSON.stringify(ret.data.phb))
                            vm.dygoods = ret.data.dygoods;
                            // console.log('抖好货'+JSON.stringify(vm.dygoods));
                            setTimeout(function() {
                                var swiper = new Swiper('.swiper3', {
                                    slidesPerView: 3,
                                    autoplay: {
                                        delay: 3000,
                                        disableOnInteraction: false,
                                        waitForTransition: true,
                                    },
                                    freeMode: false,
                                    touchRatio: 1,
                                    observeParents: true,
                                    observer: true,
                                    loop: false,
                                });
                            }, 10)

                            setTimeout(function() {
                                var swiper = new Swiper('.swiper5', {
                                    slidesPerView: 3,
                                    autoplay: {
                                        delay: 3000,
                                        disableOnInteraction: false,
                                        waitForTransition: true,
                                    },
                                    freeMode: false,
                                    touchRatio: 1,
                                    observeParents: true,
                                    observer: true,
                                    loop: false,
                                });
                            }, 10)
                        }
                    }
                });
            },
            openVideoPlayPage: function(itemid, itemshorttitle, dyVideoUrl, dyVideoTitle) {
                api.openWin({
                    name: 'video_play',
                    url: './video_play.html',
                    slidBackEnabled: true,
                    pageParam: {
                        itemid: itemid,
                        itemshorttitle: itemshorttitle,
                        dyVideoUrl: dyVideoUrl,
                        dyVideoTitle: dyVideoTitle
                    }
                });
            },
            openShakeGoodsPage: function() {
                cl.openWin({
                    name: 'shake_goods'
                })
            },
            getOaid: function() {
                if (api.systemType == 'android') {
                    var readId = api.require('readId');
                    readId.readOaId(function(ret, err) {
                        //  alert(JSON.stringify(ret))
                        if (ret.status) {
                            vm.oaid = ret.data;
                            vm.getBottomlist('OAID', vm.oaid, 3);
                        }

                    })
                }

            },
            changeBottom: function(index) {
                vm.isActive = index;
                if (vm.isActive == 1) {
                    if (api.systemType == 'android') {
                        if (api.systemVersion >= 10) {
                            vm.GuessLoveData = [];
                            vm.getBottomlist('OAID', vm.oaid, 3);
                        } else {
                            vm.GuessLoveData = [];
                            vm.getBottomlist('IMEI', api.deviceId, 3);
                        }
                    } else {

                        vm.GuessLoveData = [];
                        var idfa = api.require('idfa');
                        idfa.getIDFA(function(ret, err) {
                            if (ret.status) {
                                vm.getBottomlist('IDFA', ret.value, 3);
                            }
                        });

                    }

                } else if (vm.isActive == 0) {
                    vm.GuessLoveData = [];
                    vm.getBottomlist('', '', 1);
                } else {
                    vm.GuessLoveData = [];
                    vm.getBottomlist('', '', 2);
                }
            },
            //上拉加载
            bottomLoad: function() {
                cl.scrollBottom(function() {
                    if (vm.isActive == 1) {
                        if (api.systemType == 'android') {
                            if (api.systemVersion >= 10) {
                                vm.getBottomlist('OAID', vm.oaid, 3, true);
                            } else {
                                vm.getBottomlist('IMEI', api.deviceId, 3, true);
                            }
                        } else {
                            vm.GuessLoveData = [];
                            var idfa = api.require('idfa');
                            idfa.getIDFA(function(ret, err) {
                                if (ret.status) {
                                    vm.getBottomlist('IDFA', ret.value, 3, true);
                                }
                            });
                        }
                    } else if (vm.isActive == 0) {
                        vm.getBottomlist('', '', 1, true);
                    } else {
                        vm.getBottomlist('', '', 2, true);

                    }
                })
            },
            /**
             *
             * 获取大家发现，美食，猜你喜欢
             * @return {[type]} [description]
             */
            getBottomlist: function(deviceType, deviceValue, type, isClick) {
                // alert(deviceType)
                // alert(deviceValue)
                // alert(type)
                if (isClick) {
                    vm.pageId += 1;
                } else { // 下拉刷新 或者 初次加载
                    vm.pageId = 1;
                }
                cl.openLoading();
                api.ajax({
                    url: cl.apiServer + 'tb/getGoodThing',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: ''
                    },
                    data: {
                        body: {
                            deviceType: deviceType,
                            deviceValue: deviceValue,
                            pageId: vm.pageId,
                            pageSize: 10,
                            type: type,
                            version: cl.deviceInfo().appVersion,
                            mobileInfo: cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    // alert(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            cl.closeLoading();
                            if (ret.data.length >= 10) {
                                vm.no_more = false;
                                vm.GuessLoveData = vm.GuessLoveData.concat(ret.data);
                            } else if (ret.data.length == 0) {
                                vm.no_more = true;
                            } else {
                                vm.GuessLoveData = vm.GuessLoveData.concat(ret.data);
                            }
                        }
                    }
                });
            },
            openGoodsDtailsPage: function(id) {
                cl.openWin({
                    name: 'goods_deatils',
                    pageParam: {
                        id: id
                    }
                })
            },
            openHotListPage: function() {
                return;
                cl.openWin({
                    name: 'hot_list'
                })
            }
        }
    });
</script>

</html>
